<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
    <title>后台管理系统</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/element-ui.css">
    <link rel="stylesheet" href="css/base.css">
    <style>
        
        .lookInvoiceClass .el-form-item{
            margin-bottom: 0 !important;
        }
    </style>
</head>
<body>
<div id="optimizeClueManagement" class="optimizeClueManagement mainPadding" style="display: none;">
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>充值管理</el-breadcrumb-item>
        <el-breadcrumb-item>商家发票记录</el-breadcrumb-item>
    </el-breadcrumb>    
    <div class="mainSearchBg">
        <div class="mainSearchFormBox">
            <el-form :inline="true" class="demo-form-inline mainSearchForm" :model="form" ref="form">                
                <el-form-item label="申请商家:" label-width="auto">
                    <el-select v-model="form.applyUserId" filterable  clearable placeholder="申请商家">
                        <el-option
                            v-for="item in merchantUserListOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请日期:">
                    <el-date-picker
                        v-model="form.createStartTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker
                        v-model="form.createEndTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button icon="el-icon-search" type="primary" @click="searchTable('form')"  class="searchBtn" style="margin-left: 10px;">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row>
            <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                style="width: 100%"
                border
                :data="dataTable"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column align="center" type="selection" width="55"></el-table-column> -->
                <el-table-column align="center" type="index" label="序号"  width="55"></el-table-column>
                <el-table-column align="center" prop="invoiceOrderNum" label="申请订单号"></el-table-column>
                <el-table-column align="center" prop="createTime" label="申请时间"  :formatter="dateFormat" width="300"></el-table-column>
                <el-table-column align="center" prop="invoiceAmount" label="发票金额"></el-table-column>
                <el-table-column align="center" prop="applyUserName" label="申请商家"></el-table-column> 
                <el-table-column align="center" prop="handler" label="查看发票信息" width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 1">
                            -
                        </span>
                        <span v-else>
                            <el-button size="mini" type="success" @click="lookInvoice(scope.row.id)">查看</el-button>
                        </span>
                    </template>
                </el-table-column>       
                <el-table-column align="center" prop="handler" label="操作" width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 1">
                            <el-button size="mini" type="success" @click="updateStatus(scope.row.id)">标记已开</el-button>
                        </span>
                        <span v-else>
                            已开具
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <table-pagination :pager="pager" @change="searchTable"></table-pagination>
        </el-row>
    </div>
    <el-dialog class="lookInvoiceClass" title="查看发票 " :visible.sync="lookInvoiceVisible" width="540px">
        <div>
            <el-form :model="lookInvoiceForm" ref="lookInvoiceForm">
                <el-form-item label="发票抬头：" prop="invoiceHeader" :label-width="formLabelWidth">
                    <span>{{lookInvoiceForm.invoiceHeader}}</span>
                </el-form-item>
                <el-form-item label="纳税人识别号：" prop="taxpayerIdentificationNum" :label-width="formLabelWidth">
                    <span>{{lookInvoiceForm.taxpayerIdentificationNum}}</span>
                </el-form-item>
                <el-form-item label="邮寄地址：" prop="address" :label-width="formLabelWidth">
                    <span>{{lookInvoiceForm.address}}</span>
                </el-form-item>
                <el-form-item label="收件电话：" prop="phone" :label-width="formLabelWidth">
                    <span>{{lookInvoiceForm.phone}}</span>
                </el-form-item>
                <el-form-item label="收件人姓名：" prop="name" :label-width="formLabelWidth">
                    <span>{{lookInvoiceForm.name}}</span>
                </el-form-item>
                <el-form-item label="开户银行：" prop="openingBank" :label-width="formLabelWidth">
                    <span>{{lookInvoiceForm.openingBank}}</span>
                </el-form-item>
                <el-form-item label="银行账号：" prop="bankAccount" :label-width="formLabelWidth">
                    <span>{{lookInvoiceForm.bankAccount}}</span>
                </el-form-item>
            </el-form>
         </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<div th:include="_footer_include :: #jsLib"></div>

<!-- import common js-->
<script th:inline="javascript">
    var merchantUserList1=[[${userList}]];//商户集合
    var merchantUserList=merchantUserList1.data;
    console.log(merchantUserList)
    var ocmVM = new Vue({
        el: '#optimizeClueManagement',
        data: function() {
            return {
                lookInvoiceVisible:false,
                pendingReviewNum:'',
                multipleSelection: [],//选择行
                pager:{
                  total: 0,
                  currentPage: 1,
                  pageSize: 20,
                },
                form: {
                  applyUserId:'',
                  createStartTime:'',
                  createEndTime:'',
                },
                lookInvoiceForm:{
                    invoiceHeader:'',
                    taxpayerIdentificationNum:'',
                    address:'',
                    phone:'',
                    name:'',
                    bankAccount:'',
                    openingBank:''
                },
                formLabelWidth: '120px',
                dataTable: [],
                merchantUserListOptions:merchantUserList,
            }        	  
        },
        methods: {
            lookInvoice(id){
                this.lookInvoiceVisible=true
                axios.post('/merchant/merchantApplyInvoice/findMerchantApplyInvoiceDeatil', {id:id})
                    .then(function (response) {
                        var result =  response.data;
                        console.log(result,'详情页数据');
                        if (result.code == "0") {
                            ocmVM.lookInvoiceForm=result.data
                        }else{
                        	  ocmVM.$message.error("操作失败");
                        }
                    })
                    .catch(function (error) {
                      console.log(error);
                    });
            },
            clickRow(row){
                this.$refs.multipleTable.toggleRowSelection(row)
            },
            handleSelectionChange(val) {//选择节点的事件
                // console.log(val)
                this.multipleSelection = val;
            },
            handleStart(index, row) {
                console.log(index, row);
            },
            handleForbid(index, row) {
                console.log(index, row);
            }, 
            //审核
            updateStatus(id) {
                debugger
                var param = {};
                param.id=id; 
                // this.$confirm('确认审核通过吗？', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                // }).then(() => {
                    axios.post('/merchant/merchantApplyInvoice/markInvoiceIssued', param)
                    .then(function (response) {
                        var result =  response.data;
                        if (result.code == "0") {
                            ocmVM.$message({
                                message: '操作成功', type: 'success', duration: 1000, onClose: function () {
                                    ocmVM.searchTable();
                                }
                            });
                        }else{
                        	  ocmVM.$message.error("操作失败");
                        }
                    })
                    .catch(function (error) {
                      console.log(error);
                    });
                // }).catch(() => {
                //     console.log(error);
                // });
            },
            searchTable() {
            	var startTime=this.form.createStartTime;
                var endTime=this.form.createEndTime;
                if(endTime && startTime>endTime){
                    this.$message({
                        message: '结束时间不允许选择早于开始时间',
                        type: 'warning'
                    });
                    return;
                }
                var param =this.form;
                param.pageSize = this.pager.pageSize;
                param.pageNum = this.pager.currentPage;
                param.applyUserId = this.form.applyUserId;
                param.createStartTime = this.form.createStartTime;
                param.createEndTime = this.form.createEndTime;
                console.info(param);
                axios.post('/merchant/merchantApplyInvoice/findMerchantApplyInvoiceList', param)
                .then(function (response) {
                    console.log(response)
                    var result =  response.data;
                    if(result.code==0){
                        var table=result.data;
                        ocmVM.dataTable= table.data;
                        ocmVM.pager.total =  table.total;
                        ocmVM.pager.currentPage = table.currentPage;
                    }else{
                        ocmVM.$message.error(result.msg);
                    }                    
                })
                .catch(function (error) {
                     console.log(error);
                });
                
            },
          //日期数据格式化方法
            dateFormat( row, column, cellValue, index) {
                if (cellValue == undefined) {
                    return "";
                }
                return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
            },

        },
        created(){
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
            // console.info("create method");
            this.searchTable();
        },
        mounted(){
            document.getElementById('optimizeClueManagement').style.display = 'block';
        }
  })
</script>
</html>